<template>
  <div class="app-container">
    <u-page title="操作记录">
      <u-filtered>
        <el-form :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="推送问卷" prop="type">
            <el-select v-model="listQuery.questionnaireId" placeholder="请选择问卷" clearable class="upgrade">
              <el-option v-for="item in questionnaire" :key="item.id" :label="item.title" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="操作人" prop="createdBy">
            <el-input v-model="listQuery.createdBy" placeholder="请输入操作人" clearable />
          </el-form-item>
          <el-form-item label="状态" prop="ack">
            <el-select v-model="listQuery.ack" placeholder="请选择">
              <el-option
                v-for="item in ackList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="操作时间" prop="searchDate">
            <u-date-time-picker v-model="searchDate" @change="changeSearchDate" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="hdlFilter">查询</el-button>
          </el-form-item>
        </el-form>

      </u-filtered>

      <u-table
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="listQuery"
        :fetch="hdlList"
      >
        <template v-slot:right>
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" @click="hdlEdit(row)">详情</el-button>
            </template>
          </el-table-column>
        </template>
      </u-table>

    </u-page>

    <u-dialog title="记录详情" :show.sync="dialogFormVisible" :footer="false">
      <el-form ref="dialogForm" :model="dataForm" label-width="100px">

        <el-descriptions :column="2" border>
          <el-descriptions-item>
            <template slot="label">
              操作时间
            </template>
            {{ dataForm.createdAt | date }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              操作人
            </template>
            {{ dataForm.createdBy }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              推送问卷
            </template>
            {{ dataForm.questionnaireTitle }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              操作备注
            </template>
            {{ dataForm.remark }}
          </el-descriptions-item>

          <el-descriptions-item :column="2" :label-style="{width: '180px'}">
            <template slot="label">
              处理名单
            </template>
            <template v-if="dataForm.content">
              {{ dataForm.content }}
            </template>
          </el-descriptions-item>

        </el-descriptions>

      </el-form>
    </u-dialog>
  </div>
</template>
<script>
export default {
  data: function() {
    return {
      api: this.$u.api.PluginsQuestionnaireMassdelivery,
      // 表格
      columns: [
        {
          prop: 'questionnaireTitle',
          label: '问卷标题'
        },
        {
          prop: 'createdAt',
          label: '操作时间',
          timestamp: true
        },
        {
          prop: 'ack',
          label: '状态',
          render: (h, params) => {
            if (params.row.ack === 1) {
              return h('el-tag', { props: { type: 'success' }}, '成功')
            } else if (params.row.ack === 2) {
              return h('el-tag', { props: { type: 'danger' }}, '失败')
            } else {
              return h('el-tag', { props: { type: 'warning' }}, '待推送')
            }
          }
        },
        {
          prop: 'createdBy',
          label: '操作人',
          formatter: (row, column) => {
            return row.createdBy === '' ? '系统处理' : row.createdBy
          }
        },
        {
          prop: 'note',
          label: '执行备注'
        }
      ],

      list: [],
      listLoading: false,
      listOptions: {
        mutiSelect: false, // boolean 是否多选
        stripe: true // boolean 斑马纹
      },
      listQuery: {
        pageNumber: 1,
        pageSize: 20,
        totalCount: 1,
        beginTime: '',
        endTime: '',
        type: '',
        newLevel: '',
        createdBy: ''
      },
      dialogFormVisible: false,
      dataForm: {},
      questionnaire: [],
      ackList: [
        { label: '成功', value: 1 },
        { label: '失败', value: 2 },
        { label: '待推送', value: 0 }
      ]
    }
  },
  created() {
    this.questionnaireSet()
    this.hdlList()
  },
  methods: {
    // 获取推送问卷列表
    questionnaireSet() {
      const data = {
        push: true // 推送true,不推送false
      }
      this.$u.api.PluginsQuestionnaireNewlist.list(data).then(res => {
        this.questionnaire = res.data.list
      })
    }
  }
}
</script>
<style lang="scss" scoped>

::v-deep{
  .upgrade{
    display: inline-block;
    margin-right: -5px;
    .el-input{
      width:120px !important;
    }
    .el-input__inner{
      width:120px !important;
    }
    .el-input--suffix .el-input__inner{
      width:120px !important;
    }
    .el-input__icon{
      height:100%;
    }
  }
}
</style>

